<template>
  <div class="insuranceDetail">
    <!-- 头部返回与标题 -->
    <van-nav-bar
      title="投保详情"
      left-text="返回"
      left-arrow
      @click-left="handleGoBack"
    />

    <!-- 投保单基本信息 -->
    <div class="policy-header">
      <h2>投保单 #{{insuranceInfo.insuranceId}}</h2>
      <p>提交时间: {{insuranceInfo.createTime}}</p>
      <van-tag
          :type="getTagType(insuranceInfo.underwritingResult)"
          class="status-tag"
        >{{ insuranceInfo.underwritingResult }}</van-tag>
    </div>

    <!-- 投保人信息 -->
    <div class="info-section">
      <h3><van-icon name="user" /> 投保人信息 </h3>
      <ul class="info-list">
        <li><span>姓名：</span>{{insuranceInfo.fullName}}</li>
        <li><span>身份证号：</span>{{insuranceInfo.idCard}}</li>
        <li><span>签发机关</span>{{insuranceInfo.issuingAuthority}}</li>
        <li><span>有效期限</span>{{insuranceInfo.validPeriod}}</li>
        <li @click="showImage(insuranceInfo.usccImageUrl)">
          <span>统一社会信用代码证</span><span style="color: blue;">点击查看</span></li>
        <li><span>联系电话：</span>{{insuranceInfo.phone}}</li>
        <li><span>是否河北省：</span>{{insuranceInfo.isHebeiProvince == 0 ? '否': '是'}}</li>
      </ul>
    </div>
    <!-- 上年保单信息 -->
    <div class="info-section">
      <h3><van-icon name="user" /> 上年商业险信息 </h3>
      <ul class="info-list">
        <li><span>商业险承保地区：</span>{{insuranceInfo.commercialInsuranceAddress}}</li>
        <li><span>商业险承保公司：</span>{{insuranceInfo.commercialInsuranceCompanyName}}</li>
        <li><span>商业险保单号：</span>{{insuranceInfo.commercialInsurancePolicy}}</li>
        <li @click="showImage(insuranceInfo.commercialInsuranceImageUrl)">
          <span>商业险保单照片：</span><span style="color: blue;">点击查看</span></li>
      </ul>
      <h3><van-icon name="user" /> 上年交强险信息 </h3>
      <ul class="info-list">
        <li><span>交强险承保地区：</span>{{insuranceInfo.compulsoryInsuranceAddress}}</li>
        <li><span>交强险承保公司：</span>{{insuranceInfo.compulsoryInsuranceCompany}}</li>
        <li><span>交强险保单号：</span>{{insuranceInfo.compulsoryInsurancePolicy}}</li>
        <li @click="showImage(insuranceInfo.compulsoryInsuranceImageUrl)">
          <span>交强险保单照片：</span><span style="color: blue;">点击查看</span></li>
      </ul>
    </div>
    <!-- 车辆信息 -->
    <div class="info-section">
      <h3><van-icon name="user" /> 车辆信息 </h3>
      <ul class="info-list">
        <li><span>车牌号：</span>{{insuranceInfo.licensePlate}}</li>
        <li><span>车辆类型：</span>{{insuranceInfo.vehicleN}}</li>
        <li><span>所有人：</span>{{insuranceInfo.owner}}</li>
        <li><span>住址：</span>{{insuranceInfo.address}}</li>
        <li><span>使用性质：</span>{{insuranceInfo.usageNature}}</li>
        <li><span>品牌型号：</span>{{insuranceInfo.brandModel}}</li>
        <li><span>车辆识别代号：</span>{{insuranceInfo.vin}}</li>
        <li><span>发动机号码：</span>{{insuranceInfo.engineNumber}}</li>
        <li><span>注册日期：</span>{{insuranceInfo.registrationDate}}</li>
        <li><span>发证日期：</span>{{insuranceInfo.issuanceDate}}</li>
        <li><span>核定载人数：</span>{{insuranceInfo.passenger}}</li>
        <li><span>货车核定载质量：</span>{{insuranceInfo.approvedLoad}}</li>
        <li><span>整备质量：</span>{{insuranceInfo.curbWeight}}</li>
        <li @click="showImage(insuranceInfo.purchaseInvoiceImageUrl)">
          <span>采集购车发票照片：</span><span style="color: blue;">点击查看</span></li>
      </ul>
    </div>
    <!-- 投保信息 -->
    <div class="info-section">
      <h3><van-icon name="user" /> 投保信息 </h3>
      <ul class="info-list">
        <li><span>投保类型：</span>{{insuranceInfo.insuranceIntentionName}}</li>
        <li><span>承保公司：</span>{{insuranceInfo.companyName}}</li>
        <li><span>意向投保地市：</span>{{insuranceInfo.intendedName}}</li>
      </ul>
    </div>
    <!-- 派单信息 -->
    <div class="info-section">
      <div class="pActive" v-for="(v,i) in pActiveList" :key="i">
        <h3 class='z'>
          <div>
            <van-icon name="user" />  派单编号 <span style="margin-left: 10px; color:red;">{{v.dispatchId}}</span>
          </div>
          <div v-if="v.isShow" @click="v.isShow = !v.isShow">收缩</div>
          <div v-else @click="v.isShow = !v.isShow">展开</div>
        </h3>
        <div v-if="v.isShow">
          <ul class="info-list">
            <li><span>派单公司：</span>{{v.currentOrg}}</li>
            <li><span>联系电话：</span>{{v.companyPhone || ''}}</li>
            <li><span>行业监督电话：</span>400-1234-1234</li>
          </ul>
          <h3><van-icon name="user" /> 接单信息 </h3>
            <ul class="info-list">
              <li><span>接单时间：</span>{{v.acceptDate}}</li>
              <li><span>接单用户：</span>{{v.operUser}}</li>
              <li><span>接单机构：</span>{{v.operOrg}}</li>
              <li><span>反馈时间：</span>{{v.feedbackDate}}</li>
            </ul>
          <h3 v-if="v.underwritingResult"><van-icon name="user" /> 处理结果 </h3>
            <ul class="info-list" v-if="v.underwritingResult == '正常承保'">
              <li><span>承保结果：</span>{{v.underwritingResultName || ''}}</li>
              <li><span>处理日期：</span>{{v.processDate}}</li>
              <li><span>处理机构：</span>{{v.operOrg}}</li>
            </ul>
            <ul class="info-list" v-if="v.underwritingResult == '处理中'">
              <li><span>拒保原因：</span>{{v.rejectReason}}</li>
              <li><span>拒保描述：</span>{{v.underwriteFailDesc}}</li>
              <li><span>拒保材料下载：</span>{{v.certMaterialUploadTime}}</li>
              <li><span>拒保日期：</span>{{v.operDime}}</li>
            </ul>
            <ul class="info-list" v-if="v.underwritingResult == '退回投保'">
              <li><span>退回类型：</span>{{v.surrenderType}}</li>
              <li><span>退回描述：</span>{{v.underwriteFailDesc}}</li>
              <li><span>退回日期：</span>{{v.operDime}}</li>
            </ul>
            <ul class="info-list"  v-if="v.underwritingResult == '放弃投保（公司操作）'">
              <li><span>放弃原因：</span>承保失败描述</li>
              <li><span>放弃描述：</span>{{承保失败描述}}</li>
              <li><span>放弃日期：</span>{{v.operDime}}</li>
            </ul>
            <ul class="info-list"  v-if="v.underwritingResult == '放弃投保（投保人操作）'">
              <li><span>放弃原因：</span>承保失败描述</li>
              <li><span>放弃描述：</span>{{承保失败描述}}</li>
              <li><span>放弃日期：</span>{{v.operDime}}</li>
            </ul>
          <h3><van-icon name="user" /> 交强险回填信息 </h3>
            <ul class="info-list">
              <li><span>是否承保：</span>{{v.compulsoryIsUnderwrite == 0 ?'否':'是'}}</li>
              <li><span>签单日期：</span>{{v.compulsoryIssueDate}}</li>
              <li><span>自主定价系数：</span>{{v.compulsorySelfPriceCoef}}</li>
              <li><span>签单保费（元）：</span>{{v.compulsoryIssuePremium}}</li>
            </ul>
          <h3><van-icon name="user" /> 商业险回填信息 </h3>
            <ul class="info-list">
              <li><span>是否承保：</span>{{v.commercialIsUnderwrite == 0 ?'否':'是'}}</li>
              <li><span>签单日期：</span>{{v.commercialIssueDate}}</li>
              <li><span>自主定价系数：</span>{{v.commercialSelfPriceCoef}}</li>
              <li><span>签单保费（元）：</span>{{v.commercialIssuePremium}}</li>
            </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="bottomButton">
    <div @click="informationModification()" v-if="insuranceInfo.isAuthorize">信息修改</div>
    <div @click="renewInsurance()" v-if="insuranceInfo.isAgainInsurance">重新投保</div>
    <div @click="abandoningInsuranceCoverage()" v-if="insuranceInfo.isAuthorize">放弃投保</div>
  </div>
  <van-popup v-model:show="showPopup" position="center">
    <div class="insuranceDetailPopup" style="text-align: center;">
      <img :src="imgUrl" alt="">
    </div>
  </van-popup>
  <van-popup v-model:show="tckShow" position="center">
    <div class="insuranceDetailPopup1" style="text-align: center;">
      <van-field
        v-model="underwriteFailDescName"
        label="放弃投保描述"
        placeholder="请输入描述"
      />
      <div class="popupDiv">
        <div @click="getinsAbandon()">确认</div>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { showToast, showDialog } from 'vant';
import 'vant/es/popup/style';
import { ref, onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router'
import {
	insurance, insAbandon
} from '/@/api/auth/ytb.ts'
const route = useRoute()
const router = useRouter()
// 照片判断
const showPopup = ref(false)
// 接收单个参数
const insuranceId = route.query.insuranceId
const cbjg = ref(0);
// 返回上一页方法
const handleGoBack = () => {
  // 实际项目中可使用路由跳转返回，如：
  router.back();
};
const pActiveList = ref([])
const insuranceInfo = ref({})
// 车辆类型
const carList = ref([
 {text:'货车（新能源）', value: '01'},
 {text:'货车（油车）', value: '02'},
 {text:'挂车', value: '03'},
 {text:'出租车（新能源）', value: '04'},
 {text:'出租车（油车）', value: '05'},
 {text:'网约车（新能源）', value: '06'},
 {text:'网约车（油车）', value: '07'},
 {text:'摩托车', value: '08'},
 {text:'拖拉机（含三轮车、农用车）', value: '09'},
 {text:'私家车（新能源）', value: '10'},
 {text:'其他车型', value: '99'},
])
// 意愿地市
const intendedCityL = ref([
 {text:'石家庄市', value: '01'},
 {text:'唐山市', value: '02'},
 {text:'秦皇岛市', value: '03'},
 {text:'邯郸市', value: '04'},
 {text:'邢台市', value: '05'},
 {text:'保定市', value: '06'},
 {text:'张家口市', value: '07'},
 {text:'承德市', value: '08'},
 {text:'沧州市', value: '09'},
 {text:'廊坊市', value: '10'},
 {text:'衡水市', value: '11'},
])
// 承保结果
const underwritingResultList = ref([
 {text:'正常承保', value: '01'},
 {text:'不予承保', value: '02'},
 {text:'退回投保', value: '03'},
 {text:'放弃投保（公司操作）', value: '04'},
 {text:'放弃投保（投保人操作）', value: '05'}
])
// 投保类型
const insuranceIntentionList = ref([
 {text:'单交强险', value: '01'},
 {text:'单商业险', value: '02'},
 {text:'交强险+商业险', value: '03'}
])
const getTagType = (status) => {
  if (status === '承保成功') return 'success';
  if (status === '处理中') return 'warning';
  if (status === '承保失败') return 'danger';
  return '';
};
// 照片点击弹出框
const imgUrl = ref('')
const showImage = (v) => {
  imgUrl.value = v
  showPopup.value = true
}
// 信息修改
const informationModification = async() => {
  sessionStorage.setItem('formfullData',JSON.stringify(insuranceInfo.value))
  router.push({ name: 'insure', query: { } })
}
// 重新投保
const renewInsurance = async() => {
  sessionStorage.setItem('formfullData',JSON.stringify(insuranceInfo.value))
  router.push({ name: 'insure', query: { } })
}
// 弹出框
const tckShow = ref(false)
const underwriteFailDescName = ref('')
// 放弃投保
const abandoningInsuranceCoverage = async() => {
  showDialog({
    title: '确认放弃投保？',
    message: '如"放弃投保",本系统6个月内不再为该车辆提供相关服务,请知悉！',
    confirmButtonText: '取消',
    showCancelButton: true, // 如果需要显示取消按钮
    cancelButtonText: '确认',
    confirmButtonColor: '#f53f3f', // 确认按钮红色，突出危险操作
  })
    .then(() => {
      tckShow.value = false
    })
    .catch(async() => {
      tckShow.value = true
    });
}
// 放弃投保确认
const getinsAbandon = async() => {
  const res = await insAbandon({dispatchId: insuranceInfo.value.dispatchld})
  if(res.code == 200) {
    router.replace({ name: 'jump', query: { } })
  }
  showToast(res.msg)
}
onMounted(async()=>{
  const res = await insurance({insuranceId})
  insuranceInfo.value = res.data.insuranceInfo
  insuranceIntentionList.value.map(v=>{
   if(v.value == insuranceInfo.value.insuranceIntention){
    insuranceInfo.value.insuranceIntentionName = v.text
   }
  })
  carList.value.map(v=>{
    if(v.value == res.data.insuranceInfo.vehicleType){
      insuranceInfo.value.vehicleName = v.text
    }
  })
  intendedCityL.value.map(v=>{
    if(v.value == res.data.insuranceInfo.intendedCity){
      insuranceInfo.value.intendedName = v.text
    }
  })
  if(res.data.dispatchInfoList){
    pActiveList.value = res.data.dispatchInfoList
    insuranceInfo.value.dispatchld = res.data.dispatchInfoList[res.data.dispatchInfoList.length - 1].dispatchId
    pActiveList.value.map(v=>{
      // v.underwritingResult = '01'
      v.isShow = false
      // v.isShow = true
      if(v.underwritingResult) {
        underwritingResultList.value.map(z=>{
         if( z.value == v.underwritingResult) {
          v.underwritingResultName = z.text
         }
        })
      }
    })
  }
  
})
</script>

<style lang="less" scoped>
.insuranceDetail {
  font-size: 14px;
  min-height: 100vh;
  background-color: #fff;
}
.bottomButton {
  display: flex;
  margin:5px 0 20px 0;
  justify-content: space-around;
  div {
    color: #fff;
    background: blue;
    font-size: 13px;
    border-radius: 7px;
    padding: 3px 7px;
  }
}
.insuranceDetailPopup {
    width: 300px;
    padding: 20px; 
    min-height: 170px;
    display: flex;
    justify-content: center;
    img {
      width: 200px;
      height: 130px;
    }
  }
  .insuranceDetailPopup1 {
    width: 300px;
    padding: 20px; 
    min-height: 100px;
    .popupDiv {
      width: 100%;
      display: flex;
      justify-content: center;
      div {
        width: 70px;
        color: #fff;
        background: blue;
        font-size: 13px;
        border-radius: 7px;
        padding: 3px 7px;
      }
    }
  }
.policy-header {
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.policy-header h2 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.policy-header p {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.info-section {
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.info-section h3 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.info-section h3 .van-icon {
  margin-right: 8px;
}

.pActive {
  margin-top: 7px;
  border-bottom: 1px dashed #666;
  .z {
    display: flex;
    justify-content: space-between;
  }
}
.info-list {
  list-style: none;
  padding: 0;
  li {
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    span:first-child {
      color: #666;
    }
  }
}

</style>